<template>
  <div id="metatgtSearch">
    <v-header title="业务指标" :showDownloadBtn="false" :saveShow="false"></v-header>
    <el-container class="metatgt-search-box">
      <el-header class="header-tool-bar" height="50px">
        <!--工具栏-->
        <el-row>
          <el-button type="primary" size="mini" @click="adddialogForm">增加</el-button>
          <el-button type="primary" size="mini" @click.stop="removedata">删除</el-button>
          <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
          <el-button type="primary" size="mini" @click="showTabeData">刷新</el-button>
          <span class="conditionquery">
          <el-input v-model="condition" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                    clearable></el-input>
          <el-button type="primary" size="mini" @click="conditionquery">查询</el-button>
        </span>
        </el-row>
      </el-header>
      <el-main class="main-table-box">
        <!--表格-->
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @select="checkrow">
          <el-table-column
            type="selection"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="meta_id"
            label="元数据代码"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="tgt_id"
            label="指标代码"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="tgt_name"
            label="指标名称"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="tgt_level"
            label="指标层级"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="code_id"
            label=" 代码ID"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="data_fmt"
            label="数据格式"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="display_fmt"
            label="显示格式"
            width="auto">
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </el-main>
    </el-container>
    <!--新增/编辑-弹框-->
    <el-dialog :title="addRoleDialogMode == 'ADD' ? '新增数据' : '编辑数据'"
               :visible.sync="addRoleDialogVisiable"
               v-model="addRoleDialogMode"
               @close="cancel"
               width="900px">
      <el-form :model="metatgtForm" :rules="rules" ref="metatgtForm" label-width="140px" class="demo-metatgtForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="元数据代码" prop="meta_id">
              <el-input v-model="metatgtForm.meta_id" :disabled="editmetadisa"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="指标代码" prop="tgt_id">
              <el-input v-model="metatgtForm.tgt_id"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="指标名称" prop="tgt_name">
              <el-input v-model="metatgtForm.tgt_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="指标层级" prop="tgt_level">
              <el-input v-model="metatgtForm.tgt_level"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="业务描述" prop="busi_desc">
              <el-input v-model="metatgtForm.busi_desc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术描述" prop="tech_desc">
              <el-input v-model="metatgtForm.tech_desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="代码ID" prop="code_id">
              <el-input v-model="metatgtForm.code_id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据格式" prop="data_fmt">
              <el-input v-model="metatgtForm.data_fmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="显示格式" prop="display_fmt">
              <el-input v-model="metatgtForm.display_fmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialogbtn">
          <el-button type="primary" @click="submitForm('metatgtForm')">确定</el-button>
          <el-button @click="cancel">关闭</el-button>
          <el-button @click="resetForm('metatgtForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import ajax from '../../../../api/ajax/ajax'
  import {VHeader} from '../../../../components'
  import api from '../../../../api/url'
  import { numLetteValidator, letterUnderLineValidators, letterValidators, oneValidator } from '../../../../assets/js/rules'
  export default {
    name: 'metaTgtManager',
    components: {
      VHeader
    },
    data () {
      return {
        checkbox: [], // 编辑判断是否只勾选一个
        multipleSelection: [], // 多选数组
        totalCount: 10, // 默认数据总数
        editmetadisa: false, // meta_id input框禁止修改
        addRoleDialogMode: 'ADD', // 对话框色对话框模式  ADD新增 MODIFY 修改
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        tableData: [], // 表格当前页数据
        list: [],
        condition: '', // 输入条件
        metatgtForm: {}, // 弹窗表单
        rules: { // 弹窗校验规则
          meta_id: [
            {required: true, message: '请输入', trigger: 'blur'},
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          tgt_id: [
            {required: true, message: '请输入', trigger: 'blur'},
            { validator: letterUnderLineValidators, trigger: 'blur' }
          ],
          tgt_name: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          tgt_level: [
            {required: true, message: '请输入', trigger: 'blur'},
            { validator: oneValidator, trigger: 'blur' }
          ],
          code_id: [
            {required: true, message: '请输入', trigger: 'blur'},
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          data_fmt: [
            {required: true, message: '请输入', trigger: 'blur'},
            { validator: letterValidators, trigger: 'blur' }
          ],
          display_fmt: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          busi_desc: [
            {required: true, message: '请输入', trigger: 'blur'}
          ],
          tech_desc: [
            {required: true, message: '请输入', trigger: 'blur'}
          ]
        },
        addRoleDialogVisiable: false,
        editdialogform: false,
        currentItem: {}
      }
    },
    methods: {
      // 显示数据列表
      showTabeData () {
        const SELECTData = {
          pageNo: '1',
          pageSize: '10'
        }
        this.packAjax(SELECTData)
      },
      // 封装查询数据
      packAjax (data) {
        ajax.post(api.SELECT_META_TGTLIST_FORPAGE, data).then((res) => {
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
        })
      },
      // 条件查询
      conditionquery () {
        const conditiondata = {
          keyword: this.condition
        }
        this.packAjax(conditiondata)
      },
      // 每页显示条目个数
      handleSizeChange: function (val) {
        this.pagesize = val
        this.handleCurrentChange()
      },
      // 当前页数
      handleCurrentChange (val) {
        this.currentPage = val
        const pagelistdata = {
          pageNo: val,
          pageSize: this.pagesize
        }
        this.packAjax(pagelistdata)
      },
      // 勾选当前行
      checkrow (row) {
        if (row.length > 0) {
          this.metatgtForm = row[0]
          this.checkbox = row
        } else {
        }
      },
      // 编辑
      handleEdit () {
        // 判断是否勾选
        if (this.checkbox.length > 0) {
          if (this.checkbox.length < 2) {
            this.addRoleDialogVisiable = true // 显示弹框
            this.editmetadisa = true // meta_id input框禁止修改
            this.addRoleDialogMode = 'MODIFY' // 新增角色对话框模式 编辑模式
            // 定义变量接收一下当前对象
            this.currentItem = JSON.parse(JSON.stringify(this.metatgtForm))
            // 解除双向绑定
            this.metatgtForm = JSON.parse(JSON.stringify(this.metatgtForm))
          } else {
            this.$message.error('只能选择一条记录进行编辑')
          }
        } else {
          this.$message.error('请选择一条记录进行编辑')
        }
      },
      // 增加按钮
      adddialogForm () {
        this.metatgtForm = {}
        this.addRoleDialogVisiable = true
        this.addRoleDialogMode = 'ADD'
        this.editmetadisa = false
      },
      // 关闭
      cancel () {
        this.addRoleDialogVisiable = false
        this.editdialogform = false
        this.metatgtForm = {...this.currentItem}
        this.$refs.metatgtForm.clearValidate()
      },
      // 重置
      resetForm () {
        // 如果是编辑进第一个判断
        this.$refs.metatgtForm.clearValidate()
        if (this.addRoleDialogMode !== 'ADD') {
          this.metatgtForm = {...this.currentItem}
        } else {
          this.metatgtForm = {}
        }
      },
      // 勾选框事件
      handleSelectionChange (val) {
        let checkedCount = val.length
        // 判断是不是全选
        if (checkedCount === this.tableData.length) {
          this.checkbox.length = checkedCount
        } else {
        }
        this.list = []
        for (let i = 0; i < val.length; i++) {
          let remdata = {
            meta_id: val[i].meta_id
          }
          this.list.push(remdata)
        }
      },
      // 新增/修改 元事件
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const insertdata = {
              meta_id: this.metatgtForm.meta_id,
              tgt_id: this.metatgtForm.tgt_id,
              code_id: this.metatgtForm.code_id,
              tgt_level: this.metatgtForm.tgt_level,
              data_fmt: this.metatgtForm.data_fmt,
              display_fmt: this.metatgtForm.display_fmt,
              tgt_name: this.metatgtForm.tgt_name,
              busi_desc: this.metatgtForm.busi_desc,
              tech_desc: this.metatgtForm.tech_desc
            }
            if (this.addRoleDialogMode === 'ADD') {
              // 新增接口
              ajax.post(api.INSERT_META_TGT, insertdata).then((res) => {
                  this.showTabeData()
                  this.$message({
                    type: 'success',
                    message: '添加成功!'
                  })
                },
                (erro) => {
                })
            } else if (this.addRoleDialogMode === 'MODIFY') {
              // 修改接口
              ajax.post(api.UPDATE_META_TGT, insertdata).then((res) => {
                  this.metatgtForm = {}
                  this.showTabeData()
                  this.$message({
                    type: 'success',
                    message: '修改成功!'
                  })
                },
                (erro) => {
                })
            }
            this.checkbox = []
            this.addRoleDialogVisiable = false
            this.$refs.metatgtForm.clearValidate()
          } else {
            return false
          }
        })
      },
      // 删除数据
      removedata () {
        if (this.checkbox.length > 0) {
          this.$confirm('是否删除所选记录', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let remdata = {
              key_list: this.list
            }
            ajax.post(api.DELETE_META_TGT, remdata).then((res) => {
              this.showTabeData()
              this.checkbox = []
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
          })
        } else {
          this.$message.error('请至少选择一条记录进行删除')
        }
      }
    },
    created () {
      this.showTabeData()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #metatgtSearch
    height 100%
    position relative
    .metatgt-search-box
      height 100%
      padding 10px 0px 20px 10px
      .header-tool-bar
        line-height 50px
        vert-align middle
        background-color #FFFFFF
        margin-bottom 3px
        .conditionquery
          width 300px
          float right
          margin-right -10px
        .el-input--mini
          width 200px
        .el-button--danger
          background-color #016DFB
          border-color #016DFB
        .dialog-input
          width 210px
          height 30px
          border-radius 4px
          border 1px solid #D8DCE5
      .main-table-box
        padding 0px 0px
        height 100%
        background-color #fff
        .el-table
          padding-bottom 36px
        .el-pagination
          z-index 5
          height 36px
          background-color #fff
          position absolute
          width 100%
          bottom 0px
          padding-bottom 4px
          border-top solid 1px #f4f4f4
    .el-dialog
      width 30%
      .el-dialog__body
        padding 20px 20px
        margin 0 auto
        margin-right 20px
        .el-date-editor
          width 260px
        .el-input
          width 100%
          .el-input__inner
            height 40px
        .el-button--primary
          float right
          margin-left 10px
        .el-button
          float right
        .el-date-editor
          height 40px
          width 100% !important
          .el-range-separator
            height 25px
</style>
